<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul {
        padding: 0;
        margin: 0
    }

    li {
        list-style: none;
        margin: 10px 0;
        border: 1px solid #ccc;
        cursor: pointer
    }
</style>

<body>
    <h1>列表</h1>
    <ul>
        <li id="1">
            <img src="" alt="">
            <b class="title">酱油</b>
        </li>
        <li id="2">
            <img src="" alt="">
            <b class="title">周白鸭</b>
        </li>
    </ul>
</body>

</html>
<script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
<script>
    // 思考的问题:
    // 1.如何通过js控制跳转页面
    // 2.如何在页面之间进行通信
    // $('li').click(function () {
    //     localStorage.setItem('key', $(this).find('b').text())
    //     location.href = "./detail.html"
    // })


    //url传参的方式

    let uu = document.querySelector('ul')

    uu.onclick = function (e) {
        if (e.target.localName == 'li') {
            let _this = e.target;
            let id = _this.getAttribute('id')
            console.log(id)
            location.href = "./detail.html?id=" + id
        }
    }
</script>